<template>
  <div id="resumelist">
    <van-nav-bar
      title="推荐人选"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"

    />
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
  <van-cell @click="sugThis(item)" v-for="(item,index) in myresumes" :key="index" >
    <template slot="title">
      <div class="content">

        <!-- <img class="avatar" :src="item.avatar" alt="tx"> -->
        <avatar :username="item.name" width="45"/>
        <div class="des">
          <span class="van-cell-text" style="width:100%;line-height:12px">{{item.name}}</span><br/>
          <span class="van-cell-text" style="width:100%;color:#777">期望职位:{{item.position?item.position:'未知职位'}}</span>
        </div>

        <div class="btn">推荐他 ></div>
      </div>
    </template>
  </van-cell>
</van-list>

<van-dialog
  v-model="show"
  show-cancel-button
  @confirm="cfSug"
  @cancle="ccSug"
>
<van-cell :value="'您确定要推荐 '+this.sugItem.name+' 给这一个职位吗?'"/>
  <van-field
    v-model="comment"
    label="推荐理由"
    placeholder="请输入推荐理由"
  />
</van-dialog>
  </div>
</template>
<script>
import Config from './project.config'
import Avatar from 'vue-avatar/src/Avatar'
export default {
  components:{
    Avatar
  },
  data(){
    return{
      loading: true,
      finished:false,
      myresumes: [],
      currentPage: 1,
      finished: false,
      show:false,
      sugItem: '',
      comment:''
    }
  },
  methods:{
    beforeClose(done){
      this.comment = ''
      done();
    },
    ccSug(){
      this.comment =''
      this.show=false
    },
    cfSug(){
      this.$http.post(Config.baseUrl + "/api/position/delivery",
      {
        resumeid: this.sugItem.id,
        positionid : this.$route.query.posId,
        comments : this.comment,
      }
      ).then(function(rsp){
        if(rsp.data.code == 1){
          this.$toast.success('成功推荐~');
          this.comment =''
          this.show=false
        }else{
          this.$toast.fail('推荐失败~');
          this.comment =''
          this.show=false
        }
      },function(error){
        this.$toast.fail('出了一些问题~');
        this.comment =''
        this.show=false
      })
    },
    onLoad(){
      this.loading = true
      this.$http.get(Config.baseUrl + '/api/bole/resumes/'+this.$route.query.posId+'/'+this.currentPage).then(function(rsp){
        if(rsp.status == 200){
          if(rsp.data.pageNum == this.currentPage){
            this.finished = rsp.data.isLastPage
            this.myresumes = this.myresumes.concat(rsp.data.list)
            this.currentPage++
            this.loading = false
          }else if(rsp.data.pageNum == 0){
            this.loading = false
            this.myresumes = [];
            this.finished = true
            this.$toast('暂无数据')
          }
        }
      },function(error){
        console.log('====================================');
        console.log(error);
        console.log('====================================');
      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    sugThis(item){
      console.log('====================================');
      console.log('sug this ', item);
      this.sugItem = item
      this.show=true
      console.log('====================================');
    }
  },
  mounted() {
    this.onLoad()
  },
}
</script>
<style lang="stylus" scoped>
.avatar{
  width 45px;
  height 45px
  border-radius 100%
}
.content{
  display flex
  justify-content flex-start
  flex-wrap nowrap
  align-items  center
}
.des{
  padding 0 12px
  flex 1
}
.btn{
  line-height 48px
  width 100px
  align-self flex-end
  text-align end
  color #38f
}
</style>

